<template>
  <div class="app-container">
    <el-card v-for="item in areaList" :key="item.id" class="box-card">
        <el-dialog title="添加餐桌" :visible="dialogFormVisible">
          <el-form :model="form" label-width="80px">
            <el-form-item label="桌号">
              <el-input v-model="form.code" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="人数">
              <el-input v-model="form.persons" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.description" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="addTable()">添加</el-button>
          </div>
      </el-dialog>
      <div slot="header" class="card-header">
        <span class="card-title">{{item.name}}</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addClick(item.id)">添加餐桌</el-button>
      </div>
      <el-tooltip v-for="table in item.tableList" :key="table.id" :content="table.description" placement="top">
        <div class="tablecell">
          <span>{{table.code}}号 &nbsp; &nbsp; &nbsp; &nbsp;{{parseInt(table.persons)}}人桌</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="deleteTable(table.id)">删除</el-button>
        </div>
      </el-tooltip>
    </el-card> 
  </div>
</template>

<script>
import { getList , createTable, getTables , deleteTableById } from '@/api/table'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      areaList: [],
      tapedId: '',
      dialogFormVisible: false,
      form: {
        code: '',
        description: '',
        persons:''
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getTables().then(response => {
        console.log(response)
        this.areaList = response.data
        this.listLoading = false
      })
    },
    addClick(areaId){
      this.tapedId = areaId
      this.dialogFormVisible = true
    },
    addTable(){
      createTable({
        areaId: this.tapedId,
        code: this.form.code,
        description: this.form.description,
        persons:this.form.persons
      }).then(response => {
        if(response.code === 200){
          this.dialogFormVisible = false
          this.form.code = ''
          this.form.description = ''
          this.form.persons = ''
          this.fetchData()
        }else{
          Message(response.data)
        }
      }).catch(error => {

      })
    },
    deleteTable(tid){
      deleteTableById({tid:tid}).then( response => {
        if(response.code === 200){
          console.log('删除成功')
          this.fetchData()
        }
      }).catch(error => {

      })
    }
  }
}
</script>
<style>
.box-card{
  width:30%;
  margin-top: 20px;
}
.tablecell{
  margin-bottom: 2px;
  height: 40px;
}
.card-title{
  font-family: '微软雅黑';
  font-size: 16px;
  font-weight: bold;
}
</style>
